<template>
    <div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 岗位名称 -->
        <el-form-item label="岗位名称" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
  
        <!-- 岗位分类 -->
        <el-form-item label="岗位分类" prop="category">
          <el-input v-model="ruleForm.category"></el-input>
        </el-form-item>
  
        <!-- 薪资水平 -->
        <el-form-item label="薪资水平" prop="salary">
          <el-select v-model="ruleForm.salary" placeholder="请选择薪资">
            <el-option label="10K以下" value="10K以下"></el-option>
            <el-option label="10K-20K" value="10K-20K"></el-option>
            <el-option label="20K-30K" value="20K-30K"></el-option>
          </el-select>
        </el-form-item>
  
        <!-- 学历要求 -->
        <el-form-item label="学历要求" prop="degree">
          <el-select v-model="ruleForm.degree" placeholder="请选择学历要求">
            <el-option label="不限" value="不限"></el-option>
            <el-option label="大专" value="大专"></el-option>
            <el-option label="本科" value="本科"></el-option>
          </el-select>
        </el-form-item>
  
        <!-- 工作地点 -->
        <el-form-item label="工作地点" prop="city">
          <el-input v-model="ruleForm.city"></el-input>
        </el-form-item>
  
        <!-- 岗位要求 -->
        <el-form-item label="岗位要求" prop="requests">
          <el-input v-model="ruleForm.requests"></el-input>
        </el-form-item>
  
        <!-- 优先条件 -->
        <el-form-item label="优先条件" prop="priorities">
          <el-input v-model="ruleForm.priorities"></el-input>
        </el-form-item>
  
        <!-- 投递开始时间 -->
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker v-model="ruleForm.startTime" type="date" placeholder="请选择开始时间"></el-date-picker>
        </el-form-item>
  
        <!-- 投递结束时间 -->
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker v-model="ruleForm.endTime" type="date" placeholder="请选择结束时间"></el-date-picker>
        </el-form-item>
  
        <!-- 提交和重置按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        ruleForm: {
          title: '',
          category: '',
          salary: '',
          degree: '',
          city: '',
          requests: '',
          priorities: '',
          startTime: '',
          endTime: ''
        },
        rules: {
          title: [
            { required: true, message: '请输入岗位名称', trigger: 'blur' },
            { min: 3, max: 50, message: '长度在 3 到 50 个字符之间', trigger: 'blur' }
          ],
          category: [
            { required: true, message: '请输入岗位分类', trigger: 'blur' }
          ],
          salary: [
            { required: true, message: '请选择薪资水平', trigger: 'change' }
          ],
          degree: [
            { required: true, message: '请选择学历要求', trigger: 'change' }
          ],
          city: [
            { required: true, message: '请输入工作地点', trigger: 'blur' }
          ],
          requests: [
            { required: true, message: '请输入岗位要求', trigger: 'blur' }
          ],
          priorities: [
            { required: false, message: '请输入优先条件', trigger: 'blur' }
          ],
          startTime: [
            { type: 'date', required: true, message: '请选择投递开始时间', trigger: 'change' }
          ],
          endTime: [
            { type: 'date', required: true, message: '请选择投递结束时间', trigger: 'change' }
          ]
        }
        
        
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('提交成功！');
          } else {
            console.error('表单校验失败！');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  };
  </script>
  
  <style scoped>
  
  .demo-ruleForm {
    width: 500px;
    margin: 20px auto;
  }
  </style>
  